<style type="text/css">

/**
 * Pure CSS3 Blogger Logo
 * On: 2 December 2011
 * Note: These experiments are under the God Almighty License.
 * Please do not replace or remove the attribution above if you want to save/modify this project legally.
 */

* {
  margin:0px;
  padding:0px;
}

html {
  overflow:hidden;
}

body {
  background:#114287;
  background:-webkit-radial-gradient(center top,circle,#2C5DA0,#003171);
  background:-moz-radial-gradient(center top,circle,#2C5DA0,#003171);
  background:-ms-radial-gradient(center top,circle,#2C5DA0,#003171);
  background:-o-radial-gradient(center top,circle,#2C5DA0,#003171);
  background:radial-gradient(center top,circle,#2C5DA0,#003171);
  height:570px;
  text-align:center;
}

a {
  color:#fff;
  text-decoration:none;
}

a:hover {
  color:#eee;
}

#blogger {
  width:240px;
  height:240px;
  margin:70px auto 0;
  background:#FF6501;
  background:-webkit-linear-gradient(-85deg,#FFCFAF 0%,#FF8C3F 50%,#FF6501 50%,#E55A00 100%);
  background:-moz-linear-gradient(-85deg,#FFCFAF 0%,#FF8C3F 50%,#FF6501 50%,#E55A00 100%);
  background:-ms-linear-gradient(-85deg,#FFCFAF 0%,#FF8C3F 50%,#FF6501 50%,#E55A00 100%);
  background:-o-linear-gradient(-85deg,#FFCFAF 0%,#FF8C3F 50%,#FF6501 50%,#E55A00 100%);
  background:linear-gradient(-85deg,#FFCFAF 0%,#FF8C3F 50%,#FF6501 50%,#E55A00 100%);
  -webkit-border-radius:32px;
  -moz-border-radius:32px;
  border-radius:32px;
  -webkit-box-shadow:inset 0px 0px 3px rgba(0,0,0,0.3),inset 0px 0px 7px rgba(0,0,0,0.2),inset 0px 1px 0px #E55A00,inset 0px 4px 0px rgba(255,255,255,0.3),0px 1px 3px rgba(0,0,0,0.6),0px 0px 7px rgba(0,0,0,0.3);
  -moz-box-shadow:inset 0px 0px 3px rgba(0,0,0,0.3),inset 0px 0px 7px rgba(0,0,0,0.2),inset 0px 1px 0px #E55A00,inset 0px 4px 0px rgba(255,255,255,0.3),0px 1px 3px rgba(0,0,0,0.6),0px 0px 7px rgba(0,0,0,0.3);
  box-shadow:inset 0px 0px 3px rgba(0,0,0,0.3),inset 0px 0px 7px rgba(0,0,0,0.2),inset 0px 1px 0px #E55A00,inset 0px 4px 0px rgba(255,255,255,0.3),0px 1px 3px rgba(0,0,0,0.6),0px 0px 7px rgba(0,0,0,0.3);
  -webkit-animation:prikitiw 1s;
  -moz-animation:prikitiw 1s;
  animation:prikitiw 1s;
  position:relative;
}

.b-top {
  position:absolute;
  width:130px;
  height:60px;
  background:#fff;
  position:absolute;
  top:45px;
  left:45px;
  -webkit-border-radius:40px 40px 0px 0px;
  -moz-border-radius:40px 40px 0px 0px;
  border-radius:40px 40px 0px 0px;
}

.b-bot {
  position:absolute;
  width:150px;
  height:98px;
  background:#fff;
  position:absolute;
  top:95px;
  left:45px;
  -webkit-border-radius:0px 7px 40px 40px;
  -moz-border-radius:0px 7px 40px 40px;
  border-radius:0px 7px 40px 40px;
}

.hole-top {
  position:absolute;
  width:50px;
  height:17px;
  background:#FF6501;
  top:85px;
  left:85px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.hole-bot {
  position:absolute;
  width:70px;
  height:17px;
  background:#FF6501;
  top:138px;
  left:85px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

h2.judul {
  font:bold 56px 'Trebuchet MS',Arial,Sans-Serif;
  margin:40px auto 0px;
  color:#fff;
  text-shadow:0px 0px 1px rgba(255,255,255,0.5),0px 1px 7px rgba(0,0,0,0.7);
}

h2.judul span.sup {
  color:#059043;
  font-family:Times,Serif;
  font-style:italic;
  font-weight:normal;
}

#ribbon {
  position:absolute;
  top:0px;
  right:0px;
  background:#B62011;
  background:-webkit-linear-gradient(left,#F60100,#B62011);
  background:-moz-linear-gradient(left,#F60100,#B62011);
  background:-ms-linear-gradient(left,#F60100,#B62011);
  background:-o-linear-gradient(left,#F60100,#B62011);
  background:linear-gradient(left,#F60100,#B62011);
  border:1px dashed rgba(255,255,255,0.4);
  width:250px;
  padding:12px 0;
  text-align:center;
  color:#fff;
  font:bold 16px Cambria,Georgia,Serif;
  font-style:italic;
  text-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -webkit-transform:rotate(45deg) translate(72px,-7px);
  -moz-transform:rotate(45deg) translate(72px,-7px);
  -ms-transform:rotate(45deg) translate(72px,-7px);
  -o-transform:rotate(45deg) translate(72px,-7px);
  transform:rotate(45deg) translate(72px,-7px);
  -webkit-box-shadow:0px 3px 0px #B40505,0px -3px 0px #B40505,0px 4px 4px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 3px 0px #B40505,0px -3px 0px #B40505,0px 4px 4px rgba(0,0,0,0.4);
  box-shadow:0px 3px 0px #B40505,0px -3px 0px #B40505,0px 4px 4px rgba(0,0,0,0.4);
}

 
@-webkit-keyframes prikitiw{
from{-webkit-transform:rotate(-30deg);opacity:0;}
to{-webkit-transform:rotate(0deg);opacity:1;}
}
@-moz-keyframes prikitiw{
from{-moz-transform:rotate(-30deg);opacity:0;}
to{-moz-transform:rotate(0deg);opacity:1;}
}
@keyframes prikitiw{
from{transform:rotate(-30deg);opacity:0;}
to{transform:rotate(0deg);opacity:1;}
}

</style>



<div id="blogger">
<div class="b-top"></div>
<div class="b-bot"></div>
<span class="hole-top"></span>
<span class="hole-bot"></span>
</div>

<div id="ribbon"><a href="http://cseven.blogspot.com/p/home">By Muhammad Ariefin</a></div>

<h2 class="judul">Blogger<span class="sup">.com</span></h2>

